@arrow-width: 10px;
@bg-color: var(--white);
@emoji-width: 36px;

.message-emoji-container {
  &-enter,
  &-appear {
    opacity: 0;
  }

  &-enter-active,
  &-appear-active {
    opacity: 1;
    transition: opacity 0.5s;
  }

  &-exit {
    opacity: 1;
  }

  &-exit-active {
    opacity: 0;
    transition: opacity 0.5s;
  }
}

.arrow(@mode: bottom) {
  &::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: @arrow-width solid transparent;
    border-right: @arrow-width solid transparent;
  }
}
.arrow(@mode) when (@mode = bottom) {
  &::before {
    border-top: @arrow-width solid @bg-color;
  }
}
.arrow(@mode) when (@mode = top) {
  &::before {
    border-bottom: @arrow-width solid @bg-color;
  }
}

.message-emoji {
  position: absolute;
  z-index: var(--zIndex_2);
  background-color: var(--white);
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 15px 20px var(--gray_opacity_2);

  &__arrow {
    position: absolute;

    &.bottom {
      .arrow(bottom);
    }

    &.top {
      .arrow(top);
    }
  }

  &__content {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;

    .emoji {
      width: @emoji-width;
      height: @emoji-width;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  &__current {
    position: absolute;
    background-color: var(--white);
    border-radius: 5px;
    padding: 10px;
    .arrow();

    &::before {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
    }

    &-tip {
      color: var(--text_color);
      font-size: 14px;
      text-align: center;
      display: block;
      margin-bottom: 10px;
    }

    &-icon {
      width: 50px;
      height: 50px;

      img {
        width: 100%;
      }
    }
  }
}
